<template>
  <view class="grid-container">
    <scroll-view class="grid-scroll-view" :scroll-x="true" scroll-with-animation>
      <view class="grid" :style="{ 'background-color': bgColor }">
        <view v-for="(item, index) in data_list" :key="index" class="grid-item" @click="goToPage(item)">
          <image :src="item.imgUrl" class="grid-img"></image>
          <text class="grid-text">{{ item.title }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    data_list: {
      type: Array,
      default: () => []
    },
    bgColor: {
      type: String,
      default: '#ffffff' // 默认背景色为白色
    }
  },
  methods: {
    goToPage(item) {
      if (!item.linkUrl) {
        this.show_msg('该功能暂未开放');
        return;
      }
      // 假设 gotoPath 是一个路由跳转的方法，你需要根据实际情况来实现它
      this.gotoPath(item.linkUrl, false, null, item.linkType);
    },
    show_msg(message) {
      // 显示消息的方法，需要根据实际情况来实现
      uni.showToast({
        title: message,
        icon: 'none'
      });
    }
  }
}
</script>

<style>
.grid-container {
  overflow: hidden;
  display: flex;
  justify-content: center; /* 居中显示 */
  width: 100%; /* 确保容器宽度占满整个屏幕宽度 */
}
.grid-scroll-view {
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center; /* 居中显示 */
}
.grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 10px; /* 根据实际需要调整内边距 */
}
.grid-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10px;
}
.grid-img {
  width: 50px; /* 根据实际需要调整 */
  height: 50px; /* 根据实际需要调整 */
}
.grid-text {
  margin-top: 5px;
  font-size: 14px;
  color: #333;
}
</style>
